<template>
  <!-- 攻略上传菜单组件 -->

  <!-- 申请权限菜单组件 -->
  <component
    :is="comp.tomddr"
    :text="comp.app.text"
    :comp="comp.app.comp"
    :ct="ct"
    :val="val"
    :mdname="comp.app.mdname"
    :popstyle="'padding-bottom:0.5rem;'"
  />
  <!-- 旧权限继承菜单组件 -->
  <component
    :is="comp.tomddr"
    :text="comp.old.text"
    :comp="comp.old.comp"
    :ct="data"
    :val="val"
    :mdname="comp.old.mdname"
    :popstyle="'padding-bottom:0.5rem;'"
  />
  <!-- 攻略目录编辑组件 -->
  <component
    :is="comp.tomddr"
    :text="comp.edit_dir.text"
    :comp="comp.edit_dir.comp"
    :val="data"
    :ct="ct"
    :mdname="comp.edit_dir.mdname"
    :popstyle="'padding-bottom:0.5rem;'"
  />
  <!-- 攻略内容编辑组件 -->
  <component
    :is="comp.tomddr"
    :text="comp.edit_data.text"
    :comp="comp.edit_data.comp"
    :val="data"
    :ct="ct"
    :mdname="comp.edit_data.mdname"
    :popstyle="'padding-bottom:0.5rem;'"
  />

  <div class="nbox1">
    <n-space justify="center">
      <template v-for="item in data.nav">
        <n-button
          :size="$cfg.sizebtn"
          type="warning"
          v-if="item.if == null || item.if?.() == false"
          @click="item.click"
          >{{ item.name }}</n-button
        >
      </template>
    </n-space>
  </div>

  <!-- 手机版攻略内容 -->
  <template v-if="cfg.mobile == true">
    <n-drawer v-model:show="data.act" :width="202" placement="left">
      <n-drawer-content title="攻略目录">
        <template v-for="item in data.list">
          <!-- Loading 骨架 -->
          <template v-if="item == null">
            <n-skeleton class="idc_left_select" />
          </template>
          <!-- Loading 后内容 -->
          <template v-else>
            <div class="idc_left_select">
              <n-spin :show="data.listname?.[item]?.loading ?? false">
                <div class="_main" @click="data.getidc(item)">
                  {{ item }}
                  <template v-if="data.listname?.[item]?.hover ?? false == true">
                    <n-icon size="13" :component="ChevronDownSharp" />
                  </template>
                  <template v-else>
                    <n-icon size="13" :component="ChevronForward" />
                  </template>
                </div>
                <div class="_list" v-if="data.listname?.[item]?.hover == true">
                  <div class="_list2"></div>
                </div>
                <div
                  class="_list2"
                  style="min-height: 100px"
                  v-if="data.listname?.[item]?.hover == true"
                >
                  <template v-for="item2 in data.listname?.[item]?.data">
                    <p
                      @click="data.loadidc(item2)"
                      :class="
                        data?.clickdata?.n_name == item2.n_name ? '_hover' : '_base'
                      "
                    >
                      {{ item2.n_name }}
                    </p>
                  </template>
                </div>
              </n-spin>
            </div>
          </template>
        </template>
      </n-drawer-content>
    </n-drawer>
    <div class="nbox1" style="margin-top: 0.75rem">
      <!-- 内容组件 -->
      <component :is="comp.img_idcdata" :data="data" />
    </div>
  </template>
  <!-- 电脑版攻略内容 -->
  <template v-else>
    <div class="mt_main mt_main_top nbox1 nbox1x">
      <div class="mt_idc_left mt_box_bg">
        <div
          style="
            overflow-y: auto;
            height: 100vh;
            padding-right: 2px;
            padding-left: 2px;
            margin-top: -9px;
          "
        >
          <template v-for="item in data.list">
            <!-- Loading 骨架 -->
            <template v-if="item == null">
              <n-skeleton class="idc_left_select" />
            </template>
            <!-- Loading 后内容 -->
            <template v-else>
              <div class="idc_left_select">
                <n-spin :show="data.listname?.[item]?.loading ?? false">
                  <div class="_main" @click="data.getidc(item)">
                    {{ item }}
                    <template v-if="data.listname?.[item]?.hover ?? false == true">
                      <n-icon size="13" :component="ChevronDownSharp" />
                    </template>
                    <template v-else>
                      <n-icon size="13" :component="ChevronForward" />
                    </template>
                  </div>
                  <div class="_list" v-if="data.listname?.[item]?.hover == true">
                    <div class="_list2"></div>
                  </div>
                  <div
                    class="_list2"
                    style="min-height: 100px"
                    v-if="data.listname?.[item]?.hover == true"
                  >
                    <template v-for="item2 in data.listname?.[item]?.data">
                      <p
                        @click="data.loadidc(item2)"
                        :class="
                          data?.clickdata?.n_name == item2.n_name ? '_hover' : '_base'
                        "
                      >
                        {{ item2.n_name }}
                      </p>
                    </template>
                  </div>
                </n-spin>
              </div>
            </template>
          </template>
        </div>
      </div>
      <div class="mt_div_right mt_box_bg">
        <!-- 内容组件 -->
        <component :is="comp.img_idcdata" :data="data" />
      </div>
    </div>
  </template>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
import updata from "./idc/updata.vue";
import edit_dir from "./idc/edit_dir.vue";
import old from "./idc/old.vue";
import edit_data from "./idc/edit_data.vue";
import img_idcdata from "./idc/img_idcdata.vue";
import { ChevronForward } from "@vicons/ionicons5";
import { ChevronDownSharp } from "@vicons/ionicons5";

export default {
  components: {
    ChevronForward,
    ChevronDownSharp,
  },
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let { ct, val } = props;

    val.idc_img = {
      list: [],
      listname: {},
      clickdata: {},
      md_updata: false,
      md_edit_data: false,
      md_edit_dir: false,
      md_app: false,
      md_edit_data: false,
      md_od: false,
      nav: [
        {
          name: "上传攻略",
          click: () => {
            val[comp.updata.mdname] = true;
          },
        },
        {
          name: "申请权限",
          if: () => {
            return cfg.function.ckqx("idc");
          },
          click: () => {
            val[comp.app.mdname] = true;
          },
        },
      ],
    };
    let data = val["idc_img"];

    if (cfg.mobile == true) {
      data.btn = "small";
    } else {
      data.bton = null;
    }

    //继承旧站权限
    data.old = async (key) => {
      try {
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/introduction/gtidc",
            type: "img",
            type2: "old",
            ot: "gt",
            key: key,
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == -1) {
          alert(`发生错误 ${res.data.msg}`);
          return;
        }
        cfg.msg.success(`ok ${res.data.msg}`, { duration: 2e3 });
        cfg.msg.success(`ok ${res.data.msg}`, { duration: 2e3 });
        cfg.msg.success(`ok ${res.data.msg}`, { duration: 2e3 });
        cfg.function.getuser();
        return;
      } catch (error) {
        cfg.function.error(error);
      }
    };

    //删除攻略
    data.del = async (idcdata) => {
      try {
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "v2/introduction/gtidc",
            type: "img",
            type2: "del",
            ot: "gt",
            oid: idcdata._id["$oid"],
            authkey: cfg.user.authkey,
          },
        });
        if (res.data.code == -1) {
          alert(`发生错误 ${res.data.msg}`);
          return;
        }
        const axdata2 = await ct.get_img_dirname(idcdata.n_dir);
        if (axdata2?.data?.length >= 1) {
          data.listname[idcdata.n_dir].data = axdata2.data;
        }
        cfg.msg.success(`ok ${res.data.msg}`, { duration: 2e3 });
        data.clickdata = {};
        cfg.router.push({
          query: {
            ...cfg.route.query,
            name: undefined,
          },
        });
      } catch (error) {
        cfg.function.error(error);
      }
    };

    data.loadidc = (item, news) => {
      data.act = false;
      if (news != "new") {
        cfg.router.push({
          query: {
            ...cfg.route.query,
            name: item.n_name,
          },
        });
        data.clickdata = item;
        return;
      } else {
        data.listname[cfg.route.query.dir]?.data?.forEach((item) => {
          if (item.n_name == cfg.route.query.name) {
            data.clickdata = item;
          }
        });
        return;
      }
    };
    data.getidc = async (dirname, news, names) => {
      try {
        if (data.listname[dirname] == null) {
          data.listname[dirname] = {
            data: [],
            hover: false,
            loading: false,
          };
        }

        let dt = data.listname[dirname];

        if (news == "upd") {
          const axdata = await ct.get_img_dirname(dirname);
          if (axdata?.data?.length >= 1) {
            dt.data = axdata.data;
          }
          cfg.router.push({
            query: {
              ...cfg.route.query,
              name: names.n_name,
            },
          });
          data.clickdata = names;
          return;
        }

        if (dt.hover == true) {
          if (news == "hover") {
            dt.hover = true;
            return;
          }
          if (news != "new") {
            cfg.router.push({
              query: {
                ...cfg.route.query,
                dir: undefined,
                name: undefined,
              },
            });
          }
          dt.hover = false;
          return;
        } else {
          if (news != "new") {
            cfg.router.push({
              query: {
                ...cfg.route.query,
                dir: dirname,
              },
            });
          }
          dt.loading = true;
        }
        const axdata = await ct.get_img_dirname(dirname);
        if (axdata?.data?.length >= 1) {
          dt.data = axdata.data;
          dt.hover = true;
        }
        dt.loading = false;
        if (news == "hover") {
          dt.hover = true;
        }
      } catch (error) {
        cfg.function.error(error);
      }
    };

    const comp = {
      //编辑目录
      edit_data: {
        comp: edit_data,
        mdname: "md_edit_data",
        text: {
          title: "编辑攻略数据",
        },
      },
      //编辑目录
      edit_dir: {
        comp: edit_dir,
        mdname: "md_edit_dir",
        text: {
          title: "编辑目录数据",
        },
      },
      //攻略内容
      img_idcdata: img_idcdata,
      //申请攻略组
      app: {
        comp: defineAsyncComponent(() => import("../comp/all/admin_group.vue")),
        mdname: "md_app",
        text: {
          title: "申请攻略组权限",
        },
      },
      //继承旧站
      old: {
        comp: old,
        mdname: "md_old",
        text: {
          title: "继承旧站权限",
        },
      },
      //上传攻略
      updata: {
        comp: updata,
        mdname: "md_updata",
        text: {
          title: "攻略图片上传",
        },
      },
      tomddr: defineAsyncComponent(() => import("@/views/gt/comp/tongyong/to_mddr.vue")),
    };

    onMounted(async () => {
      try {
        data.list = [null, null, null, null, null];
        const axdata = await ct.get_img_idc();
        if (axdata != null) {
          data.list = axdata.data;
        }

        if (cfg.route.query.dir != null) {
          await data.getidc(cfg.route.query.dir, "new");
        }

        if (cfg.route.query.name != null) {
          await data.loadidc(cfg.route.query.name, "new");
        }
      } catch (error) {
        cfg.function.error(error);
      }
    });

    return {
      comp,
      ChevronForward,
      ChevronDownSharp,
      ct,
      val,
      data,
      cfg,
    };
  },
};
</script>
